<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 测试</title>
</head>
<body>
<h1>WebSocket 测试</h1>
<div>
    <label for="sid">客户端 ID：</label>
    <input type="text" id="sid" placeholder="请输入客户端 ID（例如：client1）">
    <button onclick="connect()">连接</button>
    <button onclick="disconnect()">断开连接</button>
</div>
<div>
    <h2>服务器发送的消息：</h2>
    <ul id="messages"></ul>
</div>
<div id="error-message" style="color: red;"></div>

<script>
    let socket;
    const sidInput = document.getElementById('sid');
    const messagesList = document.getElementById('messages');
    const errorMessageDiv = document.getElementById('error-message');

    // 连接 WebSocket
    function connect() {
        const sid = sidInput.value.trim();
        if (!sid) {
            showError('请输入客户端 ID！');
            return;
        }

        // 创建 WebSocket 连接
        socket = new WebSocket(`ws://117.72.52.114:7529/api/ws/${sid}`);

        // 连接成功
        socket.onopen = function (event) {
            console.log('WebSocket 连接成功：', event);
            addMessage('已连接到服务器。');
            clearError();
        };

        // 接收到消息
        socket.onmessage = function (event) {
            console.log('服务器消息：', event.data);
            addMessage(`服务器：${event.data}`);
        };

        // 连接关闭
        socket.onclose = function (event) {
            console.log('WebSocket 连接断开：', event);
            let reason = '连接已关闭。';
            if (event.code === 1006) {
                reason = '连接异常断开，可能是服务器不可用或网络问题。';
            } else if (event.code === 1000) {
                reason = '连接正常关闭。';
            } else {
                reason = `连接关闭，代码：${event.code}，原因：${event.reason || '未知'}`;
            }
            addMessage(reason);
            showError(reason);
        };

        // 连接错误
        socket.onerror = function (error) {
            console.error('WebSocket 错误：', error);
            let errorMsg = 'WebSocket 发生错误。';
            if (error instanceof ErrorEvent) {
                errorMsg = `错误：${error.message}`;
            }
            showError(errorMsg);
            addMessage(errorMsg);
        };

        // 设置连接超时
        setTimeout(() => {
            if (socket && socket.readyState === WebSocket.CONNECTING) {
                socket.close();
                showError('连接超时，请检查服务器是否可用。');
                addMessage('连接超时，请检查服务器是否可用。');
            }
        }, 5000); // 5 秒超时
    }

    // 断开 WebSocket 连接
    function disconnect() {
        if (socket) {
            socket.close();
            socket = null;
            addMessage('已主动断开连接。');
        }
    }

    // 添加消息到页面
    function addMessage(message) {
        const li = document.createElement('li');
        li.textContent = message;
        messagesList.appendChild(li);
    }

    // 显示错误信息
    function showError(message) {
        errorMessageDiv.textContent = message;
    }

    // 清除错误信息
    function clearError() {
        errorMessageDiv.textContent = '';
    }
</script>
</body>
</html>
